<template>
	<div>
		<LoginHeader>
			<span style="float: left; font-size: 16px; margin-left:120px ;">订单详情</span>
		</LoginHeader>
		<div class="notice">
			<van-notice-bar left-icon="volume-o" text="网易严选周年庆期间-4.11日Pro会员88折暂停通知..........." class="notice_bar" />
		</div>
		<div class="address_wrap">
			<div class="tie"></div>
			<div class="address_info">
				<van-dropdown-menu title="地址">
					<van-dropdown-item v-model="value" :options="addressList" @change="changeHandle" />
				</van-dropdown-menu>
			</div>
		</div>
		<div class="coupon">
			<van-cell title="暂无可用的优惠卷" is-link value="无" style="height: 52px;" />
			<van-cell title="礼品卡" is-link value="无" style="height: 52px;" />
			<van-cell title="余额" is-link value="无" style="height: 52px;" />
		</div>
		<div class="others">
			<van-cell title="商品合计" :value="'￥' + totalPrice" style="height: 52px;" />
			<van-cell title="邮费" value="¥8.00" style="height: 52px;" />
			<van-cell title="活动优惠" value="-¥0.00" style="height: 52px;" />
			<van-cell title="优惠券" value="-¥0.00" style="height: 52px;" />
			<van-cell title="我要开发票" is-link style="height: 52px;" />
		</div>
		<div class="goods">
			<van-cell class="package" title="包裹1" style="height: 47px;">
				<div class="package_text">17:29前支付, 预计4月14日送达</div>
			</van-cell>

			<div class="list_wrap">
				<div class="item_content flex" v-for="item in goodsList" :key="item.id">
					<div class="content_left" @click="ToGoodsDetail">
						<img :src="item.imgUrl" alt="">
					</div>
					<div class="content_right" @click="ToGoodsDetail">
						<div class="right_title flex">
							<!-- <div class="red">{{ item.sourceType }}&nbsp;&nbsp;</div> -->
							<div class="name">{{ item.skuName }}</div>
						</div>
						<div class="tag">
							<van-tag round font-size="16px">{{ item.id }}</van-tag>
						</div>
						<div class="price_wrap flex">
							<div class="price">￥{{ item.orderPrice }}</div>
							<div class="discounts">优惠后￥{{ item.orderPrice }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="h_80"></div>
		</div>
		<div class="confirm">
			<div class="controls">
				<van-radio-group value="{{ isAgree }}" bind:change="onChange">
					<van-radio name="1" shape="square" icon-size="12px">
						<div class="confirm_code">我已同意<a href="https://m.you.163.com/help/new#/37/73">《网易严选服务协议》</a>
						</div>
					</van-radio>
				</van-radio-group>
			</div>
		</div>
		<div class="footer flex">
			<div class="sum_price">合计 <span class="red">￥{{totalPrice.toFixed(2)}}</span> </div>
			<button class="order_btn" @click="submitOrderHandle" :disabled="disOrderBtn">提交订单</button>

			<van-action-sheet v-model:show="show" :title="isShow ?'选择支付方式' : '请支付'" @close="closeHandle">
				<div class="pay_wrap flex_c" v-if="isShow">
					<div class="wxpay">微信支付</div>
					<button class="paybtn" @click="paymentHandle">立即支付</button>
				</div>
				<div v-else class="code_wrap">
					<img :src="imgUrl" alt="">
				</div>
			</van-action-sheet>
		</div>
	</div>
</template>

<script setup lang="ts">
import LoginHeader from '../../components/LoginHeader/index.vue'

import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
import orderApi from '@/api/order';
import { anyObjModel } from '@/api/category';
import { showFailToast, showSuccessToast } from 'vant';
import QRCode from "qrcode";

const router = useRouter()

const value = ref(1001)
const goodsList = ref<anyObjModel[]>([])
const totalPrice = ref(0)

const show = ref(false)
const isAgree = ref(true)

const orderId = ref(0)
const codeUrl = ref('')

const imgUrl = ref('')
const isShow = ref(true)

const disOrderBtn = ref(false)
let timer:any

interface addressList {
	id: number,
	value: number,
	name: string,
	address: string,
	text: string,
	default: number,
	phone: string,
}
let params: anyObjModel = {}

const addressList = ref<addressList[]>([
	{
		id: 1001,
		value: 1001,
		name: '张三',
		address: '北京北京市昌平区 ',
		phone: '18831712312',
		text: '张三 北京北京市昌平区 18831712312',
		default: 1,
	},
	{
		id: 1002,
		value: 1002,
		name: 'Jesse',
		address: '北京车城西四路恒大绿洲',
		text: 'Jesse 北京车城西四路恒大绿洲 18790986752',
		phone: '18790986752',
		default: 0
	},
	{
		id: 1003,
		value: 1003,
		name: 'Rose',
		address: '北京昌平区白各庄65号',
		phone: '18899999999',
		text: 'Rose 北京昌平区白各庄65号 18899999999',
		default: 0,
	},
])

// 事件回调
const changeHandle = (value: number) => {
	addressList.value.map(item => {
		item.default = 0
		item.value === value && (item.default = 1)

		return item
	})

}

const submitOrderHandle = () => {
	disOrderBtn.value = true
	const address = addressList.value.find(item => item.default === 1)
	// 组装数据
	params.consignee = address?.name
	params.consigneeTel = address?.phone
	params.deliveryAddress = address?.address
	params.paymentWay = 'ONLINE'
	params.orderComment = '无'
	params.orderDetailList = goodsList.value
	if(isAgree.value){

		submitOrder(params)
	}else {
		showFailToast('需要同意《网易严选服务协议》')
	}

}

const paymentHandle = async () => {
	try {
		console.log(orderId.value);
		
		await payment(orderId.value)
		isShow.value = false
		generateQR(codeUrl.value)
		console.log(orderId.value);
		
		inquiry()
	} catch (error) {
		
	}
}

const closeHandle = () => {
	clearInterval(timer)
	disOrderBtn.value = false
	isShow.value = true
	imgUrl.value = ''
}

// getOrderDetail
onMounted(() => {
	getOrderDetail()
})

// 功能函数
const getOrderDetail = async () => {
	try {
		const res = await orderApi.getOrderDetail()
		goodsList.value = res.detailArrayList
		totalPrice.value = res.totalAmount
		params.tradeNo = res.tradeNo

		console.log(res);

	} catch (error) {
		console.log(error);

	}
}

const submitOrder = async (params: anyObjModel) => {
	try {
		const res = await orderApi.submitOrder(params)
		console.log(res);
		if(!((res as anyObjModel).code && (res as anyObjModel).code !== 200)){
			showSuccessToast('提交成功')
			show.value = true
			orderId.value = res as number
		}

		
	} catch (error) {
		console.log(error);
		showFailToast('提交失败,不能重复提交')

	}
}

const payment = async (orderId:number) => {
	try {
		const res = await orderApi.payment(orderId)
		console.log(res);
		codeUrl.value = res.codeUrl
		
	} catch (error) {
		console.log(error);
	}
}

function ToGoodsDetail() {
	router.push('/goods/goodsdetail')
}

const generateQR = async (text:string) => {
  try {
    const res = await QRCode.toDataURL(text)
		console.log(res);
		
		imgUrl.value = res
  } catch (err) {
    console.error(err)
  }
}

const inquiry = () => {
	timer = setInterval(async ()=>{
			try {
				const res = await orderApi.queryPayStatus(orderId.value)
				console.log(res);
				
				if(res.code === 200){
					show.value = false
					showSuccessToast('恭喜你支付成功')
					clearInterval(timer)
					console.log('支付成功');
					
					router.push('/personal')
				}

			} catch (error) {
				console.log(error);
				
			}
		},3000)
}

</script>

<style scoped lang="less">
.h_80 {
	height: 80px;
}

.notice {
	background-color: #fff8d8;
	align-items: center;
	height: 40px;
	width: 100%;
	box-sizing: border-box;
}

.address_wrap {
	width: 100%;
	// height: 80px;
	margin-bottom: 10px;
	background-color: white;

	.tie {
		display: block;
		height: 5px;
		background-size: 20px 5px;
		background-image: url("//yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-67880192dc.png");
	}
}

.coupon {
	height: 156px;
	width: 100%;
	margin-bottom: 10px;
	background-color: white;
}

.others {
	height: 260px;
	width: 100%;
	margin-bottom: 10px;
	background-color: white;
}

.goods {
	height: 170px;
	width: 100%;
	background-color: white;

	.package {
		border-bottom: 1px solid #f4f4f4;

		.package_text {
			font-size: 12px;
		}
	}

	.list_wrap {
		width: 100%;
		height: auto;
		padding: 10px;
		background-color: #f4f4f4;
		box-sizing: border-box;

		.item_content {
			background-color: #fff;
			margin-bottom: 10px;

			.content_left {
				img {
					max-width: 130px;
					height: 90px;
				}
			}

			.content_right {
				width: 200px;
				margin-left: 10px;

				.right_title {
					font-size: 14px;
					height: 21px;

					.red {
						color: red;
						width: 80px;
						font-size: 14px;
					}

					.name {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.price_wrap {
					margin-top: 10px;
					height: 30px;
					line-height: 20px;

					.price {
						font-size: 18px;
						font-weight: bold;
						margin-right: 10px;
					}

					.discounts {
						color: red;
						font-weight: bold;
						font-size: 14px;
					}
				}
			}
		}
	}
}

.confirm {
	width: 100%;
	height: 20px;
	background-color: #f4f4f4;
	position: fixed;
	bottom: 50px;
	line-height: 20px;

	.controls {
		margin-left: 10px;

		.confirm_code {
			display: flex;
			font-size: 12px;
		}
	}


}

.footer {
	// display: flex;
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	align-items: center;
	justify-content: space-around;

	.sum_price {
		font-size: 20px;
		font-weight: bold;

		.red {
			color: red;
		}
	}

	.order_btn {
		display: block;
		width: 120px;
		background-color: red;
		height: 50px;
		color: #fff;
		border: 1px solid #fff;
	}
	.code_wrap {
		height: 600px;
		img {
				width: 200px;
				display: block;
				margin: 150px auto;
			}
		}
	.pay_wrap {
		justify-content: space-around;
		align-items: center;
		height: 600px;

		.wxpay {
			font-size: 20px;

		}

		.paybtn {
			display: block;
			width: 120px;
			background-color: red;
			height: 50px;
			color: #fff;
			border: 1px solid #fff;
		}

	}

}
</style>